<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="../js/vue.js"></script>
</head>

<body>
    <div id ="app">
        <h2>人员列表</h2>
        <button @click="updateMDM">更新马冬梅的信息</button>
        <ul>
            <li v-for="(p, index) of persons" :key="p.id">
                {{p.name}}-{{p.age}}-{{p.sex}}
            </li>
        </ul>
    </div>

    <script>
        //创建Vue实例,得到 ViewModel
        const vm = new Vue({
            el: '#app',
            // 自定义属性
            data: {
                persons:[
                    { id:'001', name:'马冬梅', age:20, sex:'女' },
                    { id:'002', name:'周冬雨', age:29, sex:'女' },
                    { id:'003', name:'周杰伦', age:30, sex:'男' },
                    { id:'004', name:'温兆伦', age:21, sex:'男' }
                ]
            },
            // 自定义计算属性
            computed: {
            },
            // 自定义方法
            methods: {
                updateMDM(){

                    // 修改数组中第一项的age
                    // 有效 （因为age是响应式属性，修改其可以被监测到）
                    this.persons[0].age = 33

                    // 无效 (因为persons是数组类型的属性，是非响应式属性，即没有setter/getter)
                    this.persons[0] = { id:'001', name:'马冬梅', age:33, sex:'女' }

                    // 有效：
                    this.$set(this.persons[0], 'age', 33)

                    // 有效：
                    this.persons.splice(0, 1, { id:'001', name:'马冬梅', age:33, sex:'女' })



                    // 在数组末尾添加一个对象
                    // 无效 (因为persons是数组类型的属性，是非响应式属性，即没有setter/getter)
                    this.persons[4] = { id:'005', name:'马萧萧', age:33, sex:'女' }

                    // 有效：
                    this.$set(this.persons, 4, { id:'005', name:'马萧萧', age:33, sex:'女' })

                    // 有效：
                    this.persons.push({ id:'005', name:'马萧萧', age:33, sex:'女' })

                    
                }
            }

        });
    </script>
</body>
</html>